<template>
  <ChartHeader title="各学校预警分布"></ChartHeader>

  <v-chart class="chart" :option="option" />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import {
  ref,
  defineEmits,
  defineProps,
  reactive,
  toRefs,
  watchEffect,
} from 'vue'
import { useVModel } from '@vueuse/core'
import { useDatePicker } from '/@/use/datePicker'
import { useBack } from '/@/use/useRouteBack'
import { NumData, TotalData } from '../types'
import { useChartEarlyWarningDistributionEachSchool } from '../use/useChartEarlyWarningDistributionEachSchool'
import ChartHeader from './ChartHeader.vue'
import VChart from 'vue-echarts'

const props = defineProps<{
  numData: NumData | null
  totalData: TotalData | null
}>()

const { option } = useOptions()

function useOptions() {
  const { numData } = toRefs(props)

  const option = reactive({})

  const { xAxisDataGrade, seriesGradeData, levelDictValueData } =
    useChartEarlyWarningDistributionEachSchool({ numData })

  watchEffect(() => {
    Object.assign(option, {
      title: {
        // text: title,
        textStyle: {
          color: '#0986b3',
        },
      },
      legend: {
        // right: '10%',
        align: 'right',
        data: levelDictValueData.value,
        textStyle: {
          // color: 'white',
        },
      },
      grid: {
        top: '15%',
        bottom: '15%',
        height: 140,
      },
      xAxis: {
        type: 'category',
        data: xAxisDataGrade.value,
        axisLabel: {
          interval: 0,
          rotate: 40,
          textStyle: {
            // color: 'white',
          },
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          interval: 0,
          rotate: 40,
          textStyle: {
            // color: 'white',
          },
        },
      },
      series: seriesGradeData.value,
    })
  })
  return {
    option,
  }
}
</script>

<style scoped lang="less">
@import url('./board-common.less');
.chart {
  height: 330px;
}
</style>
